<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>提现列表</title>
        <!-- 引入样式 -->
        <script src="../static/js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="../static/js/axios.min.js" type="application/javascript" charset="UTF-8"></script>
        <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="https://unpkg.zhimg.com/element-ui/lib/index.js"></script>
    </head>
    <body>
        <div id="app">
            <el-container>
                <el-header>
                    <div style="display: flex;height: 100%;justify-content:center;align-items: center;flex-direction: column;width: 100%;">
                        <label style="width: 100%;">提现管理</label>
                    </div>
                </el-header>
                <el-main v-loading="loading">
                    <el-form :inline="true" :model="param" class="demo-form-inline">
                        <el-form-item label="姓名">
                            <el-input v-model="param.name" placeholder="姓名"></el-input>
                        </el-form-item>
                        <el-form-item label="电话">
                            <el-input v-model="param.phone" placeholder="电话"></el-input>
                        </el-form-item>
                        <el-form-item label="银行卡号">
                            <el-input v-model="param.cardid" placeholder="银行卡号"></el-input>
                        </el-form-item>
                        <el-form-item label="提现状态">
                            <el-select v-model="param.status" placeholder="提现状态">
                                <el-option label="全部" value="4"></el-option>
                                <el-option label="提现中" value="0"></el-option>
                                <el-option label="提现成功" value="1"></el-option>
                                <el-option label="提现失败" value="2"></el-option>
                                <el-option label="用户取消" value="3"></el-option>
                                
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                        </el-form-item>
                    </el-form>
                    <el-table :data="list" style="width: 100%;" border>
                        <el-table-column prop="id" label="编号" width="80">
                        </el-table-column>
                        <el-table-column prop="name" label="姓名" width="180">
                        </el-table-column>
                        <el-table-column prop="phone" label="电话" width="120">
                        </el-table-column>
                        <el-table-column prop="bankname" label="银行" width="180">
                        </el-table-column>
                        <el-table-column prop="cardid" label="银行卡号" width="180">
                        </el-table-column>
                        <el-table-column label="金额" width="80">
                            <template slot-scope="scope">
                                {{scope.row.cash/100}} 元
                            </template>
                        </el-table-column>
                        <el-table-column label="状态" width="90">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.status == 0">提现中</el-tag>
                                <el-tag v-if="scope.row.status == 1" type="success">提现成功</el-tag>
                                <el-tag v-if="scope.row.status == 2" type="danger">拒绝提现</el-tag>
                                <el-tag v-if="scope.row.status == 3" type="info">用户取消</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button v-if="scope.row.status == 0" size="mini" type="primary" @click="success(scope.$index,scope.row.id)">提现完成</el-button>
                                <el-button v-if="scope.row.status == 0" size="mini" type="danger" @click="fail(scope.$index,scope.row.id)">拒绝提现</el-button>
                                <el-button v-if="scope.row.status == 2" size="mini" type="info" @click="fail(scope.$index,scope.row.id)">备注</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-dialog title="拒绝原因" :visible.sync="dialogVisible" width="30%">
                        <el-input type="textarea" :rows="5" placeholder="请输入拒绝原因" v-model="textarea">
                        </el-input>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible = false">取消</el-button>
                            <el-button type="primary" @click="edit_done()">确定</el-button>
                        </span>
                    </el-dialog>
                </el-main>
                <el-footer>
                    <el-pagination background layout="prev, pager, next" :total="total" :page-size='page.size'
                        @current-change="pageChange">
                    </el-pagination>
                </el-footer>
            </el-container>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    page: {
                        index: 1,
                        size: 15
                    },
                    list: [],
                    total: 1,
                    param: {
                        name: '',
                        phone: '',
                        cardid: '',
                        status: '4'
                    },
                    index: 0,
                    dialogVisible: false,
                    textarea:'',
                    loading:false
                },
                methods: {
                    getList: function() {
                        var self = this
                        self.loading = true
                        axios.post('http://127.0.0.1:8080/api/cash/list', {
                                pager: self.page,
                                order: self.param
                            }).then(function(response) {
                                let res = JSON.parse(JSON.stringify(response.data))
                                if (res.result == 0) {
                                    self.list = res.list
                                    self.total = res.total
                                } else {
                                    alert(res.msg)
                                }
                                self.loading = false
                            })
                            .catch(function(error) {
                                console.log(error);
                                self.loading = false
                            });
                    },
                    pageChange: function(index) {
                        this.page.index = index
                        this.getList()
                    },
                    onSubmit: function() {
                        // console.log(this.param)
                        this.getList()
                    },
                    success: function(row, id) {
                        var self = this
                        self.loading = true
                        axios({
                                method: 'get',
                                url: 'http://127.0.0.1:8080/api/cash/success',
                                params: {
                                    id: id,
                                    mark: ''
                                }
                            }).then(function(response) {
                                let res = JSON.parse(JSON.stringify(response.data))
                                if (res.result == 0) {
                                    self.list[row].status = 1
                                } else {
                                    alert(res.msg)
                                }
                                self.loading = false
                            })
                            .catch(function(error) {
                                console.log(error);
                                self.loading = false
                            });
                    },
                    fail: function(row, id) {
                        this.dialogVisible = true
                        this.index = row
                        this.textarea = this.list[row].mark
                    },
                    edit_done: function() {
                        var self = this
                        self.loading = true
                        axios({
                                method: 'get',
                                url: 'http://127.0.0.1:8080/api/cash/fail',
                                params: {
                                    id: self.list[self.index].id,
                                    mark: self.textarea
                                }
                            }).then(function(response) {
                                let res = JSON.parse(JSON.stringify(response.data))
                                if (res.result == 0) {
                                    self.list[self.index].status = 2
                                    this.dialogVisible = false
                                    alert(res.msg)
                                } else {
                                    alert(res.msg)
                                }
                                self.loading = false
                            })
                            .catch(function(error) {
                                console.log(error);
                                self.loading = false
                            });
                    }
                }
            })
            app.getList()
        </script>
    </body>
</html>
